<template>   
           <div class="box" style="width:100%;height:100%">
              <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">绑定银行卡</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <main>
                     <p class="text">请绑定持卡人本人储蓄卡</p>
                     <div class="box1">
                           <div class="list">
                                <span class="lf">持卡人</span>
                                <input type="text" v-model="name" placeholder="请填写持卡人姓名">
                           </div>
                           <div class="list">
                                <span class="lf">身份证</span>
                                <input type="number" v-model="idcard" placeholder="请填写持卡人身份证号码">
                           </div>
                           <div class="list">  
                                <span class="lf" style="width:22%;">银行</span>
                                <el-select v-model="value4" clearable placeholder="请选择" style="position:relative;top:0;bottom:0;margin:auto 0;">
                               <el-option 
                                   v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                               </el-select>
                           </div>
                           <div class="list" style="border:none;" >
                                <span class="lf">卡号</span>
                                <input type="number" v-model="cardnumber" placeholder="请填写银行卡号">
                           </div>
                     </div>
                     <div class="box2" style="margin-bottom:30%;">
                          <div class="list">
                                <span class="lf">手机号</span>
                                <input type="number" v-model="phone" placeholder="请填写手机号">
                           </div>
                           <div class="list">
                                <span class="lf" style="width:22%;">验证码</span>
                                <input type="number" placeholder="输入验证码" style="width:40%;">
                                <button class="hqyzm" :disabled="btnloading" @click="yzm" >{{getyzm}}</button>
                           </div> 
                     </div>
                    <div class="bottom"> 
                         <button class="btn" @click="qrtj">确认并提交</button>
                         <span class="iconfont icon-tishi ts"><b>绑卡不会产生任何费用，入账，还款，均使用此银行卡</b></span>    
                    </div> 
               </main>
           </div>    
</template>

<script>
import $ from 'jquery'
import { setInterval, clearInterval } from 'timers';

export default {
         data(){
             return{
                name:"",
                cardnumber:"",
                idcard:"",
                phone:"",
                getyzm:"获取验证码",
                btnloading:false,
                 options: [{
                        value: '中国建设银行',
                        label: '中国建设银行'
                        }, {
                        value: '中国光大银行',
                        label: '中国光大银行'
                        }, {
                        value: '华夏银行',
                        label: '华夏银行'
                        }, {
                        value: '中国邮政储蓄',
                        label: '中国邮政储蓄'
                        }, {
                        value: '中国农业银行',
                        label: '中国农业银行'
                        },{
                        value: '中国银行',
                        label: '中国银行'
                        }, {
                        value: '中兴实业银行',
                        label: '中兴实业银行'
                        }, {
                        value: '上海浦东发展银行',
                        label: '上海浦东发展银行'
                        },{
                        value: '中国工商银行',
                        label: '中国工商银行'
                        }, {
                        value: '兴业银行',
                        label: '兴业银行'
                        }, {
                        value: '平安银行',
                        label: '平安银行'
                        }, {
                        value: '中国民生银行',
                        label: '中国民生银行'
                        },{
                        value: '光大发展银行',
                        label: '光大发展银行'
                        }],
               value4: '',

             }
         },
          methods:{
                back(){
                    var that = this  
                    var btnArray = ['狠心离开', '不放弃'];
                    mui.confirm('差一点点就能拿到钱了，确定这时候放弃吗？','', btnArray, function(e) {
                if (e.index == 0) {
                    that.$router.go(-1)
                } else {
                    } 
                })
              },
             yzm(){
                 if(this.name==''||!(/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/.test(this.name)))return mui.toast("您输入的真实姓名有误");
                 if(this.idcard=="" || !(/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.idcard))) return mui.toast("您输入的身份证号码有误");
                 if(this.xz =="请选择") return mui.toast("请选择办卡银行")
                 if(this.cardnumber=="" ||!(/^([1-9]{1})(\d{14}|\d{18})$/.test(this.cardnumber))) return mui.toast("请正确填写银行卡号")
                 if(this.phone =="" ||!(/^1[34578]\d{9}$/.test(this.phone))) return mui.toast("请正确填写手机号")
                 var djs = 60;
                 var time = setInterval(()=>{
                     djs--;
                     this.btnloading = true;
                      $(".hqyzm").css({"background":"#0dafe6","color":"#fff"})
                     this.getyzm = "已发送("+djs+")"
                     if(djs==0){
                         clearInterval(time)
                         this.btnloading = false;
                         $(".hqyzm").css({"background":"#fff","color":"#0dafe6"})
                         this.getyzm = "重新获取"
                     }
                 },1000)
             },
             qrtj(){
                 var data = [this.name,this.idcard,this.value4,this.cardnumber]
                 var bkdata = JSON.stringify(data)
                 localStorage.setItem("bankdata",bkdata)
                 this.$router.go(-1)
             }    
          }   
}
</script>

<style lang="less" scoped>
        /**{ touch-action: none; }*/
        header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position:fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         main{
             width:100%;
             background:#f5f5f5;
             height:100%;
             display:flex;
             flex-direction:column;
         }
         .text{
             width:90%;
             line-height:2.2rem;
             color:#666666;
             font-size:0.55rem;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
         }
         .box1{
             width:90%;
             background:#fff;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             height:7.9rem;
             border-radius:0.18rem;
             padding-left:3%;
             margin-bottom:0.6rem;
         }
         .list{
             width:100%;
             display:flex;
             border-bottom:0.02rem solid #dfdfdf;
             height:1.98rem;
         }
         .lf{
             width:30%;
             line-height:1.98rem;
             color:#302f2f;
             font-size:0.55rem;
         }
          input::-webkit-input-placeholder{ /*WebKit browsers*/
            color: #c6c6c6;
            }
            input::-moz-input-placeholder{ /*Mozilla Firefox*/
            color: #c6c6c6;
            }
            input::-ms-input-placeholder{ /*Internet Explorer*/ 
            color: #c6c6c6;
        }
         input{
             position: relative;
             top:0;
             bottom:0;
             margin:auto 0;
             font-size:0.55rem;
             border:none;
             color:#555555;
         }
         a{
             position: relative;
             top:0;
             bottom:0;
             margin:auto 0;
             border:none;
             font-size:0.54rem;
             padding-left:5%;
             color:#c6c6c6;
             width:60%;
         }
         .box2{
             width:90%;
             background:#fff;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             height:3.92rem;
             border-radius:0.18rem;
             padding-left:3%;
         }
         .hqyzm{
             width:35%;
             border:0.08rem solid #0dafe6;
             border-radius:0.18rem;
             height:1.6rem;
             position:relative;
             text-align:center;
             top:0;
             bottom:0;
             margin:auto 0;
             color:#0dafe6;
             font-size:0.52rem;
         }
         .bottom{
             width:100%;
             flex:1;
             padding-left:9%;
             display:flex;
             flex-direction:column;
         }
         .btn{
             width:90%;
             height:1.8rem;
             background: #0dafe6; /* Old browsers */
                background: -moz-linear-gradient(left, #0dafe6 0%, #2989d8 100%, #2989d8 100%, #7db9e8 100%, #1c89fe 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(left, #0dafe6 0%,#2989d8 100%,#2989d8 100%,#7db9e8 100%,#1c89fe 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to right, #0dafe6 0%,#2989d8 100%,#2989d8 100%,#7db9e8 100%,#1c89fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dafe6', endColorstr='#1c89fe',GradientType=1 ); /* IE6-9 */;
             border:none;
            color:#fff;
            border-radius:0.2rem;
            font-size:0.65rem;
            margin-bottom:1rem;
            border:none;
         }
         b{
             font-size:0.44rem;
             padding-left:0.2rem;
             color:#b8baba;
             font-weight:500;
         }
         .ts{
             color:#b8baba;
         }
</style>
